<template>
	<view>
		<view class="cu-card dynamic">
			<view class="cu-item shadow">
				<detail :detail="detail" :info="info"></detail>
				<view class="cu-list menu-avatar comment solids-top" v-if="show">
					<view class="cu-bar bg-white solid-bottom start">
						<view class="action">
							<text class=" text-blue">最新评论</text>
						</view>
					</view>
					<view class="cu-item" v-for="item in newcoment" :key="item._id" @click="toggleMask('回复'+item.name,item.id,'hf',item._id)">

						<image class="cu-avatar round " :src="item.avatar"></image>
						<view class="content">
							<view class="text-grey">{{item.name}}</view>
							<view class="text-gray text-content text-df">
								{{item.content}}
							</view>
							<view v-if="item.r_content" class="bg-grey padding-sm radius margin-top-sm  text-sm">
								<view class="flex">
									<view>楼主： </view>
									<view class="flex-sub">{{item.r_content}}</view>
								</view>
							</view>
							<view class="margin-top-sm flex justify-between">
								<view class="text-gray text-df">{{item.time | unix2Time}}</view>
								<view>
									<text class="cuIcon-messagefill text-gray margin-left-sm"></text>
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>

		<view class="content" v-if="show">
			<button @click="toggleMask('评论',null,'pl')">发布评论</button>
			<!-- <uni-view data-v-48ec7902="" class="cu-bar input"><uni-view data-v-48ec7902="" class="action"><uni-text data-v-48ec7902="" class="cuIcon-sound text-grey"><span></span></uni-text></uni-view><uni-input data-v-48ec7902="" class="solid-bottom"><div class="uni-input-wrapper"><div class="uni-input-placeholder input-placeholder" data-v-48ec7902=""></div><input maxlength="300" step="" autocomplete="off" type="" class="uni-input-input"></div></uni-input><uni-view data-v-48ec7902="" class="action"><uni-text data-v-48ec7902="" class="cuIcon-emojifill text-grey"><span></span></uni-text></uni-view><uni-button data-v-48ec7902="" class="cu-btn bg-green shadow-blur">发送</uni-button></uni-view> -->
			<ygc-comment ref="ygcComment" :placeholder="placeholder" @pubComment="pubComment()"></ygc-comment>
		</view>
	</view>
</template>

<script>
	import ygcComment from '@/components/ygc-comment/ygc-comment.vue';
	export default {
		onLoad: async function(option) { //option为object类型，会序列化上个页面传递的参数

			this.show = this.$store.state.comment
			console.log(this.$store.state.comment);
			uni.showLoading({
				title: "加载中"
			})
			this.show = this.$store.state.comment
			this.info = JSON.parse(option.params);
			console.log(this.info);
			this.islogin = uni.getStorageSync('islogin') //登录状态
			if (this.islogin) { //登录了
				this.userinfo = uni.getStorageSync('userPhone') || uni.getStorageSync('userWx');
			}
			var {
				result
			} = await uniCloud.callFunction({
				name: "get_detail",
				data: {
					id: JSON.parse(option.params)._id
				}
			})
			this.detail = result[0]
			this.init()
			uni.hideLoading()
		},
		components: {
			ygcComment
		},
		data() {
			return {
				info: {},
				detail: {},
				commentContent: '',
				comment: [],
				placeholder: "评论",
				t_id: "", //帖子id
				islogin: "", //登录state
				userinfo: "", //用户info
				type: "", //当前点击类型
				id: "", //回复id
				newcoment: [],
				show: true
			};
		},
		watch: {
			comment() {
				var obj = {};
				this.newcoment = this.comment.reduce(function(item, next) {
					obj[next.time] ? '' : obj[next.time] = true && item.push(next);
					return item;
				}, []);
			}
			
		},
		methods: {

			toggleMask(name, show, type, id) {
				this.type = type;
				console.log(id);
				if (!this.islogin) {
					uni.showToast({
						title: "请先登录在评论",
						icon: "none"
					})
					return
				}
				if (type == 'pl') {

					this.t_id = this.info._id

				} else {
					if (this.info.u_id != this.userinfo.id) return
					this.id = id
					console.log(this.id);
				}
				console.log(this.info);
				console.log(this.userinfo);

				let shows = show ? null : 'show'
				this.$refs.ygcComment.toggleMask(shows);
				this.placeholder = `${name}:`
			},
			pubComment(commentContent1) {
				uni.showLoading({
					title: "评论中"
				})
				this.Funcomment(commentContent1)
				this.$refs.ygcComment.toggleMask();
				this.commentContent = commentContent1;
			},
			Funcomment(commentContent1) {
				let type = this.type
				if (type == 'pl') {
					var data = {
						type,
						t_id: this.t_id,
						time: new Date().getTime(),
						name: this.userinfo.name || this.userinfo.phone,
						avatar: this.info.avatar,
						content: commentContent1,
						read: 0
					}
				} else {
					var data = {
						type,
						id: this.id,
						avatar: this.userinfo.atr,
						r_content: commentContent1
					}
				}
				uniCloud.callFunction({
					name: "upload_comment",
					data,
				}).then(res => {
					delete data.type;
					if (type == 'pl') {
						this.newcoment.unshift(data)
					} else {
						let index = this.newcoment.findIndex(item => item._id == this.id)
						this.newcoment.splice(index, 1)

						this.newcoment = [...this.newcoment, Object.assign(this.newcoment[index], data)]
					}

					type == 'pl' ? this.to() : null
					//this.init()
					//this.newcoment.unshift(data)
					uni.showToast({
						title: "评论成功",

					})

					this.$refs.ygcComment.content = '';
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: "评论失败请重试",
						icon: "none"
					})
				})
			},
			to() {
				uni.createSelectorQuery().select('.start').boundingClientRect(data => { //目标位置节点 类或者 id
					uni.createSelectorQuery().select(".dynamic").boundingClientRect((res) => { //最外层盒子节点类或者 id
						uni.pageScrollTo({
							duration: 0, //过渡时间
							scrollTop: data.top - res.top, //到达距离顶部的top值
						})
					}).exec()
				}).exec();
			},
			async init() {
				var {
					result
				} = await uniCloud.callFunction({
					name: "get_comment",
					data: {
						type: "comment",
						id: this.info._id
					}
				})
				console.log(result.data);
				result.data.map(async item => {
					let {
						result
					} = await uniCloud.callFunction({
						name: "get_comment",
						data: {
							type: "re_comment",
							re_id: item._id
						}
					})
					if (result.data.length) {
						this.comment.unshift(Object.assign(result.data[0], item))
						console.log(Object.assign(result.data[0], item));
						console.log(result.data[0]);
						console.log(this.comment);
					} else {
						this.comment.unshift(item)
						this.comment.sort((time) => {
							return function(a, b) {
								var value1 = a[time];
								var value2 = b[time];
								return value2 - value1;
							}
						});
						console.log(this.comment);
					}
				})


				
			},
		}
	}
</script>

<style>

</style>
